<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                    user-scalable=no, 
                    initial-scale=1.0,
                    maximum-scale=1.0, 
                    minimum-scale=1.0"/>
    <title>Document</title>
</head>
<body>
    <pre>
        移动端：
            手持触屏设备等
        PPI：
            代表屏幕每英寸的像素数量，即像素密度
        设备像素:
            设备屏幕的物理像素，出厂后高宽就固定了(是固定的一个区域)
        CSS像素：
            逻辑像素，在屏幕内描述分辨率的一种方式，它表示在单位区域内包含的像素数量
        DPR：
            设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
            DPR = 设备像素 / CSS像素(某一方向上)
        
        布局视口：
            视口与移动浏览器屏幕宽度不再相关联，而是完全独立的
        理想视口：
            显示宽度应该和设备宽度一致。
            布局视口的宽度应该和理想视口的宽度一致

        移动端项目常用单位：
            px：固定长度单位
            em：相对长度单位[相对直接父元素做大小变化]
            rem：相对长度单位[相对同一个基准做大小变化]
        
        移开端开发步骤：
        1）添加理想视口的meta
        2）布局按照移动端的设备大小布局
        3）添加内容[文字大小依然按照原来设置即可。设备的理想视口自动会调整]
                样式参照html的标准来，单位采用rem
                使用封装的rem.js

    </pre>
    <script type="text/javascript" src="js/rem.js"></script>
    <script type="text/javascript" src="js/chapter1.js"></script>
</body>
</html>